<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>courseDetails</title>
</head>

<body class="df dcloum">
    <div class="box df">
        <!-- 遮罩层1 -->
        <div class="mask1 df dcloum flex">
            <!-- 上面节数 -->
            <div class="mask-top rel flex">
                <div class="splot abs">
                    <h1>3/8</h1>
                    <span>胯关节环绕</span>
                </div>
            </div>
            <!-- 下面操作 -->
            <div class="mask-bottom df ">
                <span class="iconfont icon-left"></span>
                <span class="iconfont icon-pause2" id="contiuneBtn"></span>
                <span class="iconfont icon-right"></span>
            </div>
        </div>
        <!-- 遮罩层2 -->
        <div class="mask2 flex">
            <p class="title">放弃可以找到一万个理由，坚持只需一个信念!</p>
            <!-- 继续 结束按钮 -->
            <div class="btn df">
                <div class="circle df dcloum" id="puseBtn">
                    <span  class="iconfont icon-pause"></span>
                    <span>继续训练</span>
                </div>
                <div class="circle df dcloum" id="endBtn">
                    <span class="iconfont icon-jieshu"></span>
                    <span>结束训练</span>
                </div>
            </div>
            <!-- 当前节 -->
            <section class="df">
                <div class="pic tcenter">
                    <span class="iconfont icon-pic "></span>
                </div>
                <div class="text tcenter">
                    <span>当前</span>
                    <p>胯关节环绕</p>
                </div>
            </section>
        </div>
        <!-- 内容 -->
        <div class="content">
            <!-- 表头视频 -->
            <header class="rel">
                <div class="video"></div>
                <span class="iconfont .icon-next abs"></span>
            </header>
            <!-- 主体 -->
            <main class="flex df dcloum">
                <!-- 总览 -->
                <div class="title df dcloum">
                    <h3>巧克力腹肌雕刻</h3>
                    <div class="df summary">
                        <div class="df status">
                            <div class="font14 ccc"><span class="font20" id="calorie">45</span>千卡</div>
                            <div class="font14 ccc"><span class="font20" id="time">15</span>分钟</div>
                        </div>
                        <div class="people font14 ccc" id="peoplenum">99.99w人练过<span class="iconfont icon-next"></span>
                        </div>
                    </div>
                </div>
                <!-- 头像 -->
                <div class="user df">
                    <div class="pic">
                        <img src="../../assets/imgs/头像.jpg" alt="" id="avatar">
                    </div>
                    <div class="username df dcloum">
                        <h3>用户名</h3>
                        <p class="font14 ccc">三线达人课程设计</p>
                    </div>
                </div>
                <!-- 课程解释 -->
                <div class="explain font16 ccc" id="desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Eveniet
                    accusantium aperiam dolores? Placeat laboriosam dolores harum esse expedita facilis consequuntur
                    voluptas deleniti voluptatem corporis, hic ex quod ducimus illo quisquam!
                </div>
                <!-- 说明 -->
                <div class="instructions df">
                    <div class="practice flex">
                        <h4 class="font16">联系频次</h4>
                        <p class="font12 ccc" id="frequency">每周3-5次</p>
                    </div>
                    <div class="equipment flex">
                        <h4 class="font16">器械</h4>
                        <p class="font12 ccc">无</p>
                    </div>
                </div>
                <!-- 开始训练 -->
                <button type="button" id="startBtn">开始训练</button>
            </main>
        </div>
    </div>

</body>

</html>